import React from 'react';
import styled from 'styled-components';
import { useTable, useBlockLayout, useResizeColumns } from 'react-table';

const Styles = styled.div`
  padding: 1rem;
  .table {
    margin-right: 16px;
    display: inline-block;
    border-spacing: 0;
    border: 1px solid #D7D7D7;
    .tr {
      :last-child {
        .td {
          border-bottom: 0;
        }
      }
    }
    .header > div:nth-child(1){
    	background-color:#E8E8E8;
    }
    .header > div:nth-child(2){
    	background-color:#F3F3F3;
    }
 
    .th,
    .td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid #D7D7D7;
      border-right: 1px solid #D7D7D7;,
      width:100%;
	  word-break:keep-all;/* 不换行 */
	  white-space:nowrap;/* 不换行 */
	  overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
	  text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
      

      ${'' /* In this example we use an absolutely position resizer,
       so this is required. */}
      position: relative;
      :last-child {
        border-right: 0;
      }

      .resizer {
        display: inline-block;
        width: 10px;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(50%);
        z-index: 1;
        ${'' /* prevents from scrolling while dragging on touch devices */}
        touch-action:none;
      }
    }
  }
`;


// eslint-disable-next-line react/prop-types
const Table = ( { columns, data } ) => {
	const defaultColumn = React.useMemo(
		() => ( {
			minWidth: 130,
			width: 150,
			// maxWidth: 400,
		} ),
		[]
	);

	const {
		getTableProps,
		getTableBodyProps,
		headerGroups,
		rows,
		prepareRow,
	} = useTable(
		{
			columns,
			data,
			defaultColumn,
		},
		useBlockLayout,
		useResizeColumns
	);

	return (
		<>
			<div>
				<div {...getTableProps()} className="table">
					<div className="header">
						{headerGroups.map( headerGroup => (
							// eslint-disable-next-line react/jsx-key
							<div {...headerGroup.getHeaderGroupProps()} className="tr">
								{headerGroup.headers.map( column => (
									// eslint-disable-next-line react/jsx-key
									<div {...column.getHeaderProps()} className="th">
										{column.render( 'Header' )}
										{/* Use column.getResizerProps to hook up the events correctly */}
										<div
											{...column.getResizerProps()}
											className={`resizer ${
												column.isResizing ? 'isResizing' : ''
											}`}
										/>
									</div>
								) )}
							</div>
						) )}
					</div>

					<div {...getTableBodyProps()}>
						{rows.map( ( row, i ) => {
							prepareRow( row );
							return (
								// eslint-disable-next-line react/jsx-key
								<div {...row.getRowProps()} className="tr">
									{row.cells.map( cell => {
										return (
											// eslint-disable-next-line react/jsx-key
											<div {...cell.getCellProps()} className="td">
												{cell.render( 'Cell' )}
											</div>
										);
									} )}
								</div>
							);
						} )}
					</div>
				</div>
			</div>
		</>
	);
};


const CustomTable = ( props ) => {
	return (
		<Styles>
			{/* eslint-disable-next-line react/prop-types */}
			<Table columns={props.columns} data={props.data} />
		</Styles>
	);
};

export default CustomTable;
